<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
<<<<<<< HEAD
		<div>
			
			测试组件
		</div>
=======
		<div id="app">
			<ol>
				<!-- 
				 现在我们为每个 todo-item 提供 todo 对象
				      todo 对象是变量，即其内容可以是动态的。
				      我们也需要为每个组件提供一个“key”，稍后再
				      作详细解释。
				-->
				<todo-item
				v-for="item in listData"
				v-bind:todo="item"
				v-bind:key="item.id"
				></todo-item>
			</ol>
		</div>
		<script>
			Vue.component('todo-item',{
				//todo-item 组件现在接受一个  
				// prop 类似于一个自定义的attribute
				// 这个prop 名为todo
				props:['todo'],
				template:'<li>{{todo.text}}</li>'
				
			})
			let vv=new Vue({
				el:'#app',
				data:{
					listData:[
						{id:0,text:'蔬菜'},
						{id:1,text:'奶酪'},
						{id:2,text:'随便别人吃啥'},
					]
				},
				methods:{
				}
				
				})
		</script>		
>>>>>>> 398f9c4f7b8f0ef7298f93e1dd95dc6e81eac8eb
	</body>
</html>
